<script setup>
import {useRoute} from "vue-router";
import {pageOptions, typeOptions} from "../utils/listData.js";
import CStock from "../c-components/c-stock.vue";
import {ref} from "vue";

const route = useRoute()

const typeValue = ref('101')
const page = ref(480)
const stockCodes = ref([])
const height = ref('94vh')
const options = ref([])
const stockNames = route.query.stockName.split(',') || []
const arr = route.query.stockCode.split(',')
const isAuto = ref(true)
const isJoinShow = ref(false)
const isLineShow = ref(true)
const isSegmentShow = ref(true)
const isMultiCycle = ref(false)

let n = 2

if (arr.length === 6) {
  n = 3
}

let o = []
for (let i = 0; i < arr.length; i++) {
  o.push({
    code: arr[i],
    name: stockNames[i]
  })
  if (o.length === n) {
    stockCodes.value.push(o)
    o = []
  }
}
if (o.length) {
  stockCodes.value.push(o)
}
if (stockCodes.value.length === 1) {
  height.value = '94vh'
} else {
  height.value = '46vh'
}

if (route.query.type === '1') {
  options.value = typeOptions.filter(item => !(item.value === '102' || item.value === '103'))
} else {
  options.value = typeOptions
}

</script>

<template>
  <div class="top">
    <el-form inline>
      <el-form-item :label="route.query.stockName" v-if="isMultiCycle">

      </el-form-item>
      <el-form-item label="级别：" v-if="!isMultiCycle">
        <el-radio-group v-model="typeValue">
          <template v-for="item in options">
            <el-radio :value="item.value">{{ item.label }}</el-radio>
          </template>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="数据：" v-if="!isMultiCycle">
        <el-radio-group v-model="page">
          <template v-for="item in pageOptions">
            <el-radio :value="item.value">{{ item.label }}</el-radio>
          </template>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="合并：">
        <el-checkbox v-model="isJoinShow"/>
      </el-form-item>
      <el-form-item label="笔：">
        <el-checkbox v-model="isLineShow"/>
      </el-form-item>
      <el-form-item label="线段：">
        <el-checkbox v-model="isSegmentShow"/>
      </el-form-item>
      <el-form-item label="自动刷新：">
        <el-checkbox v-model="isAuto"/>
      </el-form-item>
      <el-form-item label="多周期：" v-if="route.query.stockCode.split(',').length === 1">
        <el-checkbox v-model="isMultiCycle"/>
      </el-form-item>

    </el-form>
  </div>
  <template v-if="!isMultiCycle" v-for="item in stockCodes">
    <div class="stocks">
      <template v-for="items in item">
        <c-stock class="stock"
                 :options="{stockType: typeValue, isAuto: isAuto, isJoinShow: isJoinShow,
                 isLineShow: isLineShow, isSegmentShow: isSegmentShow, pageSize: page,
                 stockCode: items.code, stockName: items.name
                 }"
                 :height="height">
        </c-stock>
      </template>

    </div>
  </template>
  <template v-else>
    <div class="stocks">
      <c-stock class="stock"
               :options="{stockType: '101', isAuto: isAuto, isJoinShow: isJoinShow,
                 isLineShow: isLineShow, isSegmentShow: isSegmentShow, pageSize: 240,
                 stockCode: route.query.stockCode, stockName: '日'
                 }"
               height="46vh">
      </c-stock>
      <c-stock class="stock"
               :options="{stockType: '30', isAuto: isAuto, isJoinShow: isJoinShow,
                 isLineShow: isLineShow, isSegmentShow: isSegmentShow, pageSize: 240,
                 stockCode: route.query.stockCode, stockName: '30分钟'
                 }"
               height="46vh">
      </c-stock>
    </div>
    <div class="stocks">
      <c-stock class="stock"
               :options="{stockType: '5', isAuto: isAuto, isJoinShow: isJoinShow,
                 isLineShow: isLineShow, isSegmentShow: isSegmentShow, pageSize: 240,
                 stockCode: route.query.stockCode, stockName: '5分钟'
                 }"
               height="46vh">
      </c-stock>
      <c-stock class="stock"
               :options="{stockType: '1', isAuto: isAuto, isJoinShow: isJoinShow,
                 isLineShow: isLineShow, isSegmentShow: isSegmentShow, pageSize: 0,
                 stockCode: route.query.stockCode, stockName: '1分钟'
                 }"
               height="46vh">
      </c-stock>
    </div>
  </template>
</template>

<style scoped lang="scss">
.top {
  background: #FFFFFF;
  height: 4vh;
  margin-bottom: 1vh;
  padding: 0 1vw;
  overflow: hidden;
  text-align: center;
}

.stocks {
  display: flex;
  width: 100%;
  margin-bottom: 1vh;

  > div {
    background: #FFFFFF;
    flex: 1;
    padding: 1vh 0;
    margin: 0 5px;
  }
}
</style>
